<template>
  <div id="tv_chart_container"></div>
</template>

<script>
  import Datafeeds from '../datafeed/datafeed.js';
  import tradeviewPageUtil from '../datafeed/TradeviewPageUtil';
  import storage from '../../utils/storage'
  import {mapGetters,mapActions} from 'vuex'
    export default {
        name: "tradingView",
        data(){
          return {
            isFirstFlag:true,
            newKlineObj:{},
            websocketUrl:"",
            colorUp:"#ED5E57",
            colorDown:"#0BAC6A"
            //systemTimeUrl:"http://api.coinfex.com/api/v2/pub/systemTime"
          }
        },
        watch:{
          "klineObj":function(newVal){
            this.newKlineObj = newVal;
            this.tradingViewGetReady();
            //this.websocketStart();
            this.isFirstFlag = true;
          },
          "getLanguage":function () {
            this.tradingViewGetReady();
            //this.websocketStart();
            this.isFirstFlag = true;
          }

        },
        mounted(){
          if(this.isFirstFlag){
            this.tradingViewGetReady();
            //this.websocketStart();
          }


        },
        // mounted(){
        //   //this.websocketUrl = this.paramUrl.websocketUrl;
        // },
        // computed:mapGetters(['getLanguage']),
        methods:{
          tradingViewGetReady(){
            let klineType;
            let klineTypeOption;
            if(location.href.toLowerCase().indexOf("/option") != -1){
              klineTypeOption = storage.getData("resolutionOption");
              klineType = klineTypeOption;
            }else{
              let klineTypeSpot = storage.getData("resolutionSpot") || 15;
              klineType = klineTypeSpot;
            }

            var language = this.getLanguage || 'zh'
            if(klineType == -1){
              klineType = 1;
            }
            if(language == 'zh_CN'){
                language = 'zh';
                this.colorUp = "#ED5E57";
                this.colorDown = "#0BAC6A";
            }else if(language == 'th'){
              language = 'en';
              this.colorUp = "#0BAC6A";
              this.colorDown = "#ED5E57";
            }else{
              this.colorUp = "#0BAC6A";
              this.colorDown = "#ED5E57";
            }
            if(location.href.toLowerCase().indexOf("/option") != -1){
              if(!klineTypeOption){
                if(this.newKlineObj.releaseTime){
                  const currentDate = new Date();
                  let symbolTime = tradeviewPageUtil.getIntervalHour(this.newKlineObj.releaseTime,currentDate.getTime());
                  if(symbolTime){
                    klineType = symbolTime;
                  }
                }
              }
            }

            let params = {
              resolution: klineType,
              language:language,
              colorUp:this.colorUp,
              colorDown:this.colorDown,
              timezone:'Asia/Shanghai',
              Datafeeds,
              //serverUrl: this.websocketUrl ,
              pushInterval: 1000,
              initParams:{
                symbolKlineId:this.newKlineObj.symbolKlineId,
                symbolName:this.newKlineObj.symbolName,
                scaleAmount:this.newKlineObj.scaleAmount,
                hasVolume:this.newKlineObj.hasVolume,
                request:apiUrl+urls.kline,
                //systemTimeUrl:this.systemTimeUrl,
              }
            }
            debugger;
            TradingView.onready((() => {
              window.widget = new TradingView.widget(tradeviewPageUtil.datafeedConfig(params));

              widget.onChartReady(() => {
                tradeviewPageUtil.chartReady(widget,this);
              })

            })());
          },
          websocketStart(){
            //window.ws = new WebSocket(this.websocketUrl);
          }
        },
        props:{
          klineObj:{
            type:Object
          }
        },
        destroyed(){
          this.$off('websocket_publicTradingView_start')
          this.$off('websocket_publicTradingView_stop')
        }
    }
</script>

<style scoped>
  .tv_chart_container_full {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
  }
  #tv_chart_container {
    height: 100%;
  }
   /*.icon-full {
    display: inline-block;
    background: url('/static/images/iconfull.png') no-repeat;
    width: 22px;
    height: 22px;
  }*/

</style>
